<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="application/javascript">
			
			var provinceArr = ['浙江','江苏',"河南"];
			var cityArr = [
				['杭州','宁波','温州','台州'],
				['南京','无锡','苏州','扬州','南通'],
				['郑州','开封','洛阳','焦作','商丘','平顶山']
			];
			var countryArr = [
				[
					['余杭区','下沙区','西湖区'],
					['宁波1','宁波2'],
					['鹿城区','瓯海区','龙湾区'],
					['台州1','台州2']
				],
				[
					['南京1','南京2'],
					['太湖区','市区','高新区'],
					['太阳','滨江'],
					['扬州1','扬州2'],
					['南通']
				],
				[
					['二七区','高校区'],
					['开封1','开封2'],
					['洛阳1'],
					['三阳区','市区','边区'],
					['㫿阳区','宁阳区'],
					['平顶山1','平顶山2']
				]
			];
		
			function createOptinons(objo,data){
				for (var i in data) {
					var op = new Option(data[i],i);
					objo.append(op);
				}
			}
			
			$(function(){
				createOptinons($("#province"),provinceArr);
				$("#province").change(function(){
					
					$("#city").empty();
					createOptinons($("#city"),cityArr[$("#province").val()]);
					if($("#province").val()<0){
						$("#country").empty();
					}else{
						$("#city").change();
					}
				}); 
				
				$("#city").change(function(){
					$("#country").empty();
					createOptinons($("#country"),countryArr[$("#province").val()][$("#city").val()]);
				})
			})
			
		</script>
	</head>
	<body>
		<!--省份、城市、区域-->
		<select name="" id="province">
			<option value="-1">请选择</option>
		</select>
		<select name="" id="city">
			<option value=""></option>
		</select>
		<select name="country" id="country">
			<option value=""></option>
		</select>
	</body>
</html>
